<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    #app {
      width: 400px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>珠峰</h1>
    <el-input v-model="input" placeholder="请输入姓名"></el-input>

    <el-radio v-model="radio" label="man">男</el-radio>
    <el-radio v-model="radio" label="woman">女</el-radio>
    <br><br>

    <h3>选择课程</h3>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>

  </div>
  <!-- 先引入vue.js 再引入 index.js -->
  <script src="../vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    var vm = new Vue({
      el: "#app",
      data: {
        input: '',
        radio: "man",
        checkAll: false,
        checkedCities: [],
        cities: cityOptions,
        isIndeterminate: true
      },
      methods: {
        handleCheckAllChange(val) {
          this.checkedCities = val ? cityOptions : [];
          this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
      }
    })
  </script>

</body>

</html>